<template>
	<view class="staffRegister">
		<view class="staffRegister-search">
			<view class="staffRegister-search-icon ff-bg-fff" :class="{ activeLine: searchResult }">
				<u-search placeholder="请输入单位名称" :height="72" @change="staffNameChange" input-align="center"
					v-model="unitName" :show-action="false"></u-search>
			</view>
			<view v-if="searchResult"
				class="staffRegister-search-result ff-bg-fff ff-font-13 animate__animated animate__fadeInDownBig">
				<view v-if="unitList.length > 0">
					<view class="ff-text-center ff-line-height-1-3 ff-padding-15" @click="unitNameClick(item)"
						v-for="(item, index) of unitList" :key="index">{{ item.companyName }}</view>
				</view>
				<view class="ff-color-999 ff-text-center ff-padding-15" v-else>查无此单位</view>
			</view>
		</view>
		<view class="lineHeight"></view>
		<view class="staffRegister-content" v-if="unitDetails.companyName">
			<view class="staffRegister-content-box ff-bg-fff ff-border-radius-10 ff-padding-15">
				<view class="ff-font-16 ff-font-weight-600 ff-line-height-1-3 line ff-margin-bottom-11">
					{{ unitDetails.companyName }}
				</view>
				<view class="ff-font-13 ff-flex staffRegister-content-box-address">
					<view>
						<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/unit-code.png"
							mode=""></image>
					</view>
					<view>社会信用代码（{{ unitDetails.organizationCode }}）</view>
				</view>
				<view class="ff-font-13 ff-flex staffRegister-content-box-address">
					<view>
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/unit-address.png"
							mode=""></image>
					</view>
					<view class="ff-line-height-1-3">{{ unitDetails.companyAddr }}</view>
				</view>
				<view class="ff-font-13 ff-flex staffRegister-personnelInfo">
					<view>
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/unit-personel.png"
							mode=""></image>
					</view>
					<view>
						管理员：
						<text class="ff-margin-right-10">{{ unitDetails.managerLink }}</text>
						{{ getTel(unitDetails.managerPhone) }}
					</view>
				</view>
			</view>
		</view>
		<view class="staffRegister-footer">
			<view class="ff-flex-between" v-if="unitDetails.companyName">
				<view class="staffRegister-but"><u-button type="primary" shape="circle" @click="cancelClick"
						plain>取消</u-button></view>
				<view class="staffRegister-but"><u-button type="primary" shape="circle"
						@click="joinCompany">加入该单位</u-button></view>
			</view>
			<view class="ff-margin-top-15 ff-text-center ff-font-13">
				如果没找到您所在单位，请先去
				<text @click="goUnitResitser">注册单位</text>
			</view>
		</view>
		<u-mask :show="maskType" :z-index="10" />
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: 'staffRegister',
		data() {
			return {
				customStyle: {
					'font-size': '30rpx'
				},
				unitName: '', // 搜索的内容
				unitNameType: false, // 当有前页面传的值的时候
				name: '', // 社会单位名称
				unitList: [], // 社会单位列表
				unitDetails: {}, // 选中后的单位信息
				maskType: false, // 遮罩层
				searchResult: false // 搜索内容是否为空
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的参数-----', e);
			if (e.name) {
				this.unitNameType = true; // 当有前页面传过来的值的时候
				this.unitName = e.name;
				this.searchUnitList(this.unitName); // 模糊查询
			}
		},
		methods: {
			// 模糊查询单位
			staffNameChange(e) {
				// console.log('社会单位人员搜索的字段----', e);
				if (e.length > 0) {
					this.searchUnitList(e);
				} else {
					this.unitList = []; // 社会单位列表
					this.unitDetails = {}; // 选中后的单位信息
					this.maskType = false; // 遮罩层
					this.searchResult = false; // 搜索内容
				}
			},
			// 模糊查询单位列表信息
			searchUnitList(name) {
				this.$refs.loading.openLoading('查询中···'); // 打开loading动画
				this.$http
					.get({
						url: `/company/queryByName/${name}`
					})
					.then(res => {
						// console.log('请求社会单位列表-------', res);
						if (res.code == 200) {
							this.unitList = res.data;
							if (this.unitNameType) {
								this.unitDetails = this.unitList[0];
								this.maskType = false;
								this.searchResult = false;
							} else {
								this.maskType = true;
								this.searchResult = true;
							}
						} else {
							this.$refs.uToast.show({
								title: '社会信用代码填写不正确，请核实后再试',
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},
			// 点击选中某一个社会单位
			unitNameClick(e) {
				// console.log('选中了某一个单位信息');
				this.unitDetails = e;
				this.maskType = false;
				this.searchResult = false;
			},
			// 取消操作
			cancelClick() {
				this.unitName = ''; // 清空搜索内容
				this.unitList = []; // 社会单位列表
				this.unitDetails = {}; // 选中后的单位信息
				this.maskType = false; // 遮罩层
				this.searchResult = false; // 搜索内容
			},
			// 跳转到社会单位员工注册
			joinCompany() {
				let params = {
					id: this.unitDetails.id,
					companyName: this.unitDetails.companyName
				};
				this.$pageJump.navigateTo('/pages/loginRegister/register/socialUnit/staff/staffRegisterOne?companyStaff=' +
					JSON.stringify(params));
			},
			// 跳转到社会单位员工注册
			goUnitResitser() {
				this.$pageJump.navigateTo('/pages/loginRegister/register/socialUnit/unit/unitRegisterSearch');
			},
			// 隐藏手机号中间四位
			getTel(tel) {
				return tel.substring(0, 3) + "****" + tel.substr(tel.length - 4);
			},
			// 隐藏名字
			showFirstName(name) {
				let newStr;
				if (name.length === 2) {
					newStr = name.substr(0, 1) + '*';
				} else if (name.length > 2) {
					let char = '';
					for (let i = 0, len = name.length - 1; i < len; i++) {
						char += '*';
					}
					newStr = name.substr(0, 1) + char;
				} else {
					newStr = name;
				}
				return newStr;
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.staffRegister {
		.activeLine {
			border-bottom: 2rpx solid #e6e5e5;
		}

		&-search {
			position: relative;
			top: 0;

			&-icon {
				padding: 53rpx 30rpx 30rpx;
				position: absolute;
				top: -20rpx;
				left: 0;
				width: 100%;
				z-index: 12;
			}

			&-result {
				padding-top: 5rpx;
				position: absolute;
				bottom: -733rpx;
				width: 100%;
				height: 600rpx;
				overflow-y: auto;
				z-index: 11;

				.ff-text-center {
					border-bottom: 2rpx solid #e6e5e5;
				}

				.ff-color-999 {
					border-bottom: 0;
				}
			}
		}

		&-title {
			margin-bottom: 52rpx;
		}

		&-but {
			width: 46%;

			/deep/.u-size-default {
				height: 90rpx !important;
				line-height: 90rpx !important;
			}
		}

		.lineHeight {
			height: 140rpx;
		}

		&-content {
			&-noResult {
				color: #b5bbc8;
			}

			&-box {
				margin: 20rpx 24rpx;

				.ff-font-16 {
					color: #0b0e11;
				}

				.ff-font-13 {
					color: #5c5f65;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 5rpx;
					}
				}

				&-address {
					margin: 16rpx 0;
				}
			}
		}

		&-footer {
			position: fixed;
			left: 0;
			bottom: 6%;
			width: 86%;
			margin: 0 7%;
			color: #1b315e;

			text {
				color: #3178ff;
			}

			.ff-flex-between {
				margin-bottom: 68rpx;
			}
		}
	}
</style>